
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>农产品溯源</title>
    <script src="/js/jquery-3.7.1.min.js"></script>
    <style>
body {
    font-family: 'Arial', sans-serif;
    background-color: #f1f8f4;
    color: #2e7d32;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    background-image: url('img.png'); /* 替换为你的图片URL */
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
}
 .header-container {
            background: linear-gradient(45deg, #388e3c, #66bb6a); /* Gradient background */
            color: white;
            text-align: center;
            padding: 20px 0;
            font-size: 24px;
            font-weight: bold;
            text-transform: uppercase;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px; /* Space between header and content */

 }
.content {
    width: 90%;
    margin: 20px auto;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.header {
    display: flex;
    background-color: #388e3c;
    color: #fff;
    padding: 15px;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
}

.headerItem {
    flex: 1;
    text-align: center;
}

.coBodyItem {
    display: flex;
    padding: 15px 10px;
    border-bottom: 1px solid #e0e0e0;
    align-items: center;
    transition: background-color 0.3s ease;
}

.coBodyItem:hover {
    background-color: #f1f8f4;
}

.coBodyItem:last-child {
    border-bottom: none;
}

.item {
    flex: 1;
    text-align: center;
    word-break: break-word;
    font-size: 14px;
    color: #4caf50;
}

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
}

.btn.primary {
    background-color: #43a047;
    color: #fff;
    font-weight: bold;
}

.btn.primary:hover {
    background-color: #66bb6a;
    transform: scale(1.05);
}

.btn.danger {
    background-color: #d32f2f;
    color: #fff;
    font-weight: bold;
}

.btn.danger:hover {
    background-color: #e53935;
    transform: scale(1.05);
}

.modal {
    position: fixed;
    top: 50%; /* 垂直居中 */
    left: 50%; /* 水平居中 */
    transform: translate(-50%, -50%); /* 修正偏移 */
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.modal .modelBody {
    background: #ffffff;
    padding: 25px;
    border-radius: 12px;
    width: 400px; /* 弹窗宽度 */
    max-width: 90%; /* 防止过宽 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    text-align: center;
    position: relative; /* 保持相对定位 */
    transform: translate(-50%, -50%); /* 修正居中偏移 */
    top: 50%; /* 垂直居中 */
    left: 50%; /* 水平居中 */
}



.modelBody h3 {
    color: #2e7d32;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: bold;
}

.formItem {
    margin-bottom: 20px;
}

.formItem label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #388e3c;
}

.formItem input {
    width: calc(100% - 24px); /* 输入框宽度适应弹窗减去padding */
    max-width: 100%; /* 最大宽度不超过父容器 */
    padding: 12px;
    border: 1px solid #c8e6c9;
    border-radius: 6px;
    font-size: 14px;
    color: #2e7d32;
}

.formItem input:focus {
    outline: none;
    border-color: #66bb6a;
    box-shadow: 0 0 5px rgba(102, 187, 106, 0.5);
}

.btnBox {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
    </style>
</head>
<body>
<div class="header-container">
    农产品溯源
</div>

<div class="modal"  id="addProductModal">
    <div class="mask">

    </div>
    <div class="modelBody">
        <div>新增农产品</div>
        <div class="formItem"><label>农产品名:</label> <input id="productName" name="productName" aria-label="农产品名" placeholder="农产品名"></div>
        <div class="formItem"><label>农产品简介：</label> <input id="productDesc" name="productDesc" aria-label="农产品简介"  placeholder="农产品简介"></div>
        <div class="formItem"><label>钱包地址:</label> <input id="address" name="address" aria-label="钱包地址"  placeholder="钱包地址"></div>
        <div class="formItem"><label>钱包私钥:</label> <input id="privateKey" name="privateKey" aria-label="钱包私钥 "  placeholder="钱包私钥"></div>
        <div class="btnBox"><button class="btn danger" onclick="closeProductModal()">取消</button><button class="btn primary" onclick="handleConfirm()">提交</button></div>
    </div>
</div>

<div class="modal"  id="addCodeModal">
    <div class="mask">
    </div>
    <div class="modelBody">
        <div>新增溯源码</div>
        <div class="formItem"><label>钱包私钥:</label> <input id="codePrivateKey" name="codePrivateKey" aria-label="钱包私钥 "  placeholder="钱包私钥"></div>
        <div class="btnBox"><button class="btn danger" onclick="closeCodeModal()">取消</button><button class="btn primary" onclick="addCode()">提交</button></div>
    </div>
</div>

<div class="modal"  id="jumpCodeModal">
    <div class="mask">
    </div>
    <div class="modelBody">
        <div>查看溯源码</div>
        <div class="formItem"><label>钱包私钥:</label> <input id="jumpCodePrivateKey" name="codePrivateKey" aria-label="钱包私钥 "  placeholder="钱包私钥"></div>
        <div class="btnBox"><button class="btn danger" onclick="closeJumpCodeModal()">取消</button><button class="btn primary" onclick="jumpCode()">查看</button></div>
    </div>
</div>

<button style="margin-left: 5%;margin-top: 40px" class="btn primary"  onclick="showProductModal()">新增产品</button>
<div class="content">
    <div class="header">
        <div class="headerItem">id</div>
        <div class="headerItem">农产品名称</div>
        <div class="headerItem">农产品描述</div>
        <div class="headerItem">钱包地址</div>
        <div class="headerItem">创建时间</div>
        <div class="headerItem">操作</div>
    </div>
    <div class="coBody">
    </div>
</div>

</body>




<script>
    let productId

    function showCodeModal(id) {
        $('#addCodeModal').show()
        productId = id
    }

    function jumpCodeModal(id) {
        $('#jumpCodeModal').show()
        productId = id
    }

    function  init() {
        $.ajax({
            url: '/queryProducts', // API 的 URL 地址
            type: 'POST', // 请求类型，可以是 GET, POST, PUT, DELETE 等
            success: function(data) {
                // 在这里处理从服务器返回的数据
                const { o } = data
                let  html = ''
                o.forEach(item=> {
                    const str = `
                        <div class="coBodyItem">
                        <div class="item">${item.id}</div>
                        <div class="item">${item.productName}</div>
                        <div class="item">${item.productDesc}</div>
                        <div class="item">${item.address}</div>
                        <div class="item">${item.createTime}</div>
                        <div class="item"><button class="btn danger" onclick="showCodeModal(${item.id})">新增溯源码</button><button class="btn primary" onclick="jumpCodeModal(${item.id})">查看溯源码</button></div>
                    </div>`
                    html += str
                })

                $('.coBody').html(html)
            },
            error: function(jqXHR, textStatus, errorThrown) {
                // 处理请求失败的情况
                console.error('Error: ' + textStatus + ' ' + errorThrown);
            }
        });
    }
    function showProductModal() {
        $('#addProductModal').show()
    }
    let loading = false




    function handleConfirm() {
        if(loading) return
        loading = true
        const productName = $('#productName').val()
        const productDesc = $('#productDesc').val()
        const privateKey = $('#privateKey').val()
        const address = $('#address').val()
        $.ajax({
            url: '/product/add', // API 的 URL 地址
            type: 'POST', // 请求类型，可以是 GET, POST, PUT, DELETE 等
            contentType: 'application/json',
            data: JSON.stringify({
                productName,
                productDesc,
                privateKey,
                address
            }),
            success: function(data) {
                // 在这里处理从服务器返回的数据
                const { code, msg } = data
                if(code === '1') {
                    closeProductModal()
                    init()
                    alert('新增成功')
                } else  {
                    alert(msg)
                }
                loading = false
            },
            error: function(jqXHR, textStatus, errorThrown) {
                // 处理请求失败的情况
                console.error('Error: ' + textStatus + ' ' + errorThrown);
                loading = false
            }
        });
    }


    function closeProductModal() {
        $('#productName').val('')
        $('#productDesc').val('')
        $('#privateKey').val('')
        $('#address').val('')
        $('#addProductModal').hide()
    }




    let codeLoading = false
    function addCode () {
        if(codeLoading) return
        codeLoading = true
        const codePrivateKey = $('#codePrivateKey').val()
        $.ajax({
            url: '/createCode', // API 的 URL 地址
            type: 'POST', // 请求类型，可以是 GET, POST, PUT, DELETE 等
            contentType: 'application/json',
            data: JSON.stringify({
                id: productId,
                privateKey:codePrivateKey
            }),
            success: function (data) {
                // 在这里处理从服务器返回的数据
                const {code, msg} = data
                if (code === '1') {
                    closeCodeModal()
                    alert('新增成功')
                } else {
                    alert(msg)
                }
                codeLoading = false
            },
            error: function (jqXHR, textStatus, errorThrown) {
                // 处理请求失败的情况
                console.error('Error: ' + textStatus + ' ' + errorThrown);
                codeLoading = false
            }
        })
    }

    function  closeCodeModal() {
        $('#codePrivateKey').val('')
        $('#addCodeModal').hide()
    }
    function  closeJumpCodeModal() {
        $('#jumpCodePrivateKey').val('')
        $('#jumpCodeModal').hide()
    }
    function  jumpCode() {
        const privateKey = $('#jumpCodePrivateKey').val()
        window.location.href = `/code?id=${productId}&privateKey=${privateKey}`
    }

    init()

</script>

</html>
